<template>
  <div class="chart" ref="chartRef">图标的容器</div>
  <!-- <div>{{ searchData.date }}</div> -->
</template>

<script setup>
import { inject, onMounted, ref, watchEffect, computed } from 'vue'
import { countWages } from '../../../api/salary'

const chartRef = ref(null)
const $echarts = inject('echarts')
const searchData = inject('searchData')

const wagesCount = ref([])

const achive = async () => {
  // const date = computed(() => searchData.value)
  //获取数据
  const res = await countWages(searchData.date)
  Object.assign(wagesCount.value, res.data.wagesCount) //整体赋值
  // console.log(res)

  // 需要的数据
  // 创建 data 数组
  const data = computed(() => {
    return wagesCount.value.map((item) => ({
      value: item.sumWages,
      name: item.department
    }))
  })

  if (chartRef.value) {
    const myChart = $echarts.init(chartRef.value)
    myChart.setOption({
      title: {
        text: '各部门占总工资比例',
        // subtext: 'Fake Data',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: data.value.map((item) => item.name)
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: data.value,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    })
  }
}

watchEffect(async () => {
  console.log(searchData.date, 'searchData updated')

  if (searchData.date) {
    await achive()
  }
})
onMounted(async () => {
  await achive()
})
</script>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
  /* color: #29241edf; */
}
</style>
